CSS

font-family

Со временем, скорее всего, вы захотите изменить шрифт нашего текста. То есть сейчас у нас стандартный шрифт Times New Roman. Он порой не всегда будет подходить под дизайн, он такой не очень-то красивый в целом, поэтому такая потребность возникнет определённо. Давайте теперь разбираться, как это сделать.

Для начала нужно скачать файлы наших шрифтов. В данном случае я решил воспользоваться шрифтом Lato и начертаниями bold и regular, то есть жирненькое начертание или стандартное. Я положил их в папочку «Fonts». Как правило, шрифты распространяются с расширением ttf или otf. Практически любой шрифт можно с лёгкостью найти в интернете. Для этого вводим в Google «Lato шрифт скачать» - очень стандартные фразы, переходим прям по первой ссылочке и скачиываете. Можете полазить по разным сайтикам, поискать. Я, как правило, пользуюсь сайтом webfonts.ru, можете на нём искать какие-то шрифтики.

Как правило, в интернете ходит много уроков о том, что нужно скачивать много разных файлов для шрифтов, там, ttf, otf, ещё какие-то, я уже, честно говоря, не помню. Мол, в разных браузерах шрифты не отображаются и нужно много разных шрифтов подключать. Возможно, да, это правда, но вот сколько на моём опыте я не подключал шрифты, никогда такой проблемы не возникало, поэтому можете смело скачивать либо ttf, либо otf, один шрифт на одно начертание, и будет вам счастье.

Итак, мы скачали шрифты, что делать дальше? Дальше нужно в файле «style.css» подключить этот шрифт. Я уже прописал заготовочку кода, можете смело её копировать и себе вставлять, она будет работать.

@font-face {
    font-family: font /* имя шрифта для CSS правил */
    src: local("font"), /* проверяем наличие шрифта в ОС пользователя */
         url(fonts/font.ttf); /* если шрифт не установлен, тогда загружаем его по указанному пути */
} 

Давайте разберёмся, что здесь написано и как это использовать. Ну, комментарии тут уже есть, поэтому можете на будущее их читать, но давайте всё-таки повторимся.

Первым параметром прописываем «font-family» и прописываем название нашего шрифта, который мы будем дальше использовать для того, чтобы использовать его на странице.

«Src» - здесь прописываем локальное название файла, то есть мы проверяем, есть ли этот шрифт у нас в системе встроенный. Если он не встроен, то мы идём по прописанному пути и находим файлик нашего шрифта. Если находится, то просто берётся из системы.

Для того, чтобы шрифт заработал, необходимо шрифт подключить на страницу. Для этого мы прописываем в каком-то определённом теге, в котором мы хотим задать данный шрифт, в нашем случае в «body», потому что мы хотим, чтобы шрифт работал во всем сайте. 

body{
  font-family: FontName;
}

То есть таким образом, скачиваете шрифт, кладёте в папочку «fonts», подключаете с помощью «font-face», прописываете название, локальное название, путь к этому файлику и где-то на странице указываете, где вы хотите использовать этот шрифт.

Дальше, может возникнуть такая ситуация, что вам нужно сделать какие-то жирненькие буковки. Скорее всего, вы будете делать с помощью тега «b», куда не проще. Для всех начертаний шрифтов лучше использовать шрифты, которые есть у вас в заготовке. В данном случае, вот, есть «bold», давайте для тега «b» подключим именно вот этот шрифт «bold».

b{
  font-weight: normal;
  font-family: FontBold;
}

Соответственно, если вам нужно курсивное начертание, то делаете точно так же, но только для курсивного, для тега «i».

i{
  font-style: normal;
  font-family: FontItalic;
}

И ещё один момент. Тег «b» изначально добавляет к шрифту жирность. Для него стандартно задаётся свойство «font-weight», о котором я уже рассказывал. Поэтому «font-weight» сделаем «normal», если мы задаем тег «b». Для тега «i» зададим «font-style» тоже «normal», чтобы наш браузер не назначал для тега «b» и тега «i» свою жирность и свою курсивность, чтобы это всё работало только за счёт шрифта. Поэтому сбрасываем стандартные какие-то свойства: для тега «i» - «font-style», для тега «b» - «font-weight», и в «font-family» прописываем наш шрифт, который мы должны заранее подключить.

Собственно, вот так работает подключение шрифтов. Всё довольно-таки просто, ничего сложного: скачиваете, подключаете к странице и прописываете, где вы хотите его использовать. Всё очень просто, всё очень легко. На этом с шрифтами пока что закончим.